<template>
  <div>
    <el-image style="width: 100px; height: 100px;margin-left: 50px;" src="../../../public/image1.png"/>
      <span style="line-height: 100px;font-weight: bolder;margin: 0 20px;">房屋编号：0390-103</span>
      <el-button style="background-color: #F7FAE0;color: #F2F22D;">待签订</el-button>
  </div>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="合同信息" name="first">
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="date" label="合同编号" min-width="25%" />
        <el-table-column prop="name" label="租住方案" min-width="25%" />
        <el-table-column prop="address" label="租金" min-width="25%" />
        <el-table-column prop="type" label="合同开始时间" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="date" label="合同结束时间" min-width="25%" />
        <el-table-column prop="name" label="签订人" min-width="25%" />
        <el-table-column prop="address" label="身份证号码" min-width="25%" />
        <el-table-column prop="type" label="手机号" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="date" label="签订时间" min-width="25%" />
        <el-table-column prop="name" label="生效时间" min-width="25%" />
        <el-table-column prop="address" label="租住房屋编号" min-width="25%" />
        <el-table-column prop="type" label="租住房屋公寓" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="date" label="紧急联系人" min-width="25%" />
        <el-table-column prop="name" label="联系电话" min-width="25%" />
        <el-table-column prop="address" label="身份证照片 正面" min-width="25%" />
        <el-table-column prop="type" label="身份证照片 反面" min-width="25%" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="合同附件预览" name="second">
        <el-image style="width: 300px; height: 250px" src="../../../public/image1.png"/>
    </el-tab-pane>
    <el-tab-pane label="物业交割" name="third">
      <!-- <el-table height="250">
        <el-table-column prop="name" label="出租开始时间"></el-table-column>
        <el-table-column
          prop="introduce"
          label="出租结束时间"
        ></el-table-column>
        <el-table-column prop="start" label="租户"></el-table-column>
        <el-table-column prop="end" label="证件号码"></el-table-column>
        <el-table-column prop="name" label="租住时长"></el-table-column>
        <el-table-column prop="introduce" label="退房时间"></el-table-column>
        <el-table-column prop="start" label="合同编号"></el-table-column>
      </el-table> -->
    </el-tab-pane>
  </el-tabs>
</template>